import React from "react";
import {inject, observer} from "mobx-react";
import {Route, withRouter} from "react-router-dom";
import {getRouteParams} from "../util";

import {TabBar, Tools} from "weaver-mobile";

import Home from "./home/index";
import Asset from "./asset/index";
import Statistics from "./statistics/index";
import Inventory from "./inventory/index";

const getLabel = Tools.getLabel;

@withRouter
@inject("indexStore")
@observer
class Index extends React.Component {

    componentDidMount() {
        this.Init(this.props)
    }

    componentWillReceiveProps(nextProps, nextContext) {
        this.Init(nextProps)
    }

    Init = (props) => {
        const {history, indexStore} = props;
        const {changeSelectTab} = indexStore;
        if (!history.location.pathname) {
            changeSelectTab("home", history)
        } else {
            const {tab} = getRouteParams(props);
            changeSelectTab(tab, history)
        }
    }

    render() {
        const {history, indexStore} = this.props;
        const {selectedTab, changeSelectTab} = indexStore;
        return (
            <div style={{position: "fixed", top: 0, bottom: 0, left: 0, right: 0}}>
                <TabBar
                    unselectedTintColor={window.getThemeVars ? window.getThemeVars()["less"]["color-text-placeholder"] : "#949494"}
                    barTintColor="white"
                    tabBarPosition='bottom'
                >
                    <TabBar.Item
                        title={<span
                            className={selectedTab === "home" ? "tab-tint-color" : ""}>{getLabel(1500, "首页")}</span>}
                        key="Home"
                        icon={<i
                            className='cpt-nav-bar-icon icon-cpt icon-shouye'
                        />}
                        selectedIcon={<i
                            className='tab-tint-color cpt-nav-bar-icon icon-cpt icon-shouye'
                        />}
                        selected={selectedTab === "home"}
                        onPress={() => {
                            changeSelectTab("home", history)
                        }}
                    >
                        <Route name='home' path="/index/home" component={Home}/>
                    </TabBar.Item>
                    <TabBar.Item
                        icon={<i
                            className='cpt-nav-bar-icon icon-cpt icon-jinbi'
                        />}
                        selectedIcon={<i
                            className='tab-tint-color cpt-nav-bar-icon icon-cpt icon-jinbi'
                        />}
                        title={<span
                            className={selectedTab === "asset" ? "tab-tint-color" : ""}>{getLabel(30044, "资产")}</span>}
                        key="Asset"
                        // badge={'new'}
                        selected={selectedTab === "asset"}
                        onPress={() => {
                            changeSelectTab("asset", history)
                        }}
                    >
                        <Route name='asset' path="/index/asset" component={Asset}/>
                    </TabBar.Item>
                    <TabBar.Item
                        icon={<i
                            className='cpt-nav-bar-icon icon-cpt icon-yunsuancaozuo'
                        />}
                        selectedIcon={<i
                            className='tab-tint-color cpt-nav-bar-icon icon-cpt icon-yunsuancaozuo'
                        />}
                        title={<span
                            className={selectedTab === "inventory" ? "tab-tint-color" : ""}>{getLabel(1506, "盘点")}</span>}
                        key="Inventory"
                        selected={selectedTab === "inventory"}
                        onPress={() => {
                            changeSelectTab("inventory", history)
                        }}
                    >
                        <Route name='inventory' path="/index/inventory" component={Inventory}/>
                    </TabBar.Item>
                    <TabBar.Item
                        icon={<i
                            className='cpt-nav-bar-icon icon-cpt icon-zhexiantu'
                        />}
                        selectedIcon={<i
                            className='tab-tint-color cpt-nav-bar-icon icon-cpt icon-zhexiantu'
                        />}
                        title={<span
                            className={selectedTab === "statistics" ? "tab-tint-color" : ""}>{getLabel(352, "统计")}</span>}
                        key="Statistics"
                        selected={selectedTab === "statistics"}
                        onPress={() => {
                            changeSelectTab("statistics", history)
                        }}
                    >
                        <Route name='statistics' path="/index/statistics" component={Statistics}/>
                    </TabBar.Item>
                </TabBar>
            </div>
        );
    }
}

export default Index;
